<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>代理模式之table</title>
</head>
<body>
    <h1>代理模式之table</h1>
    <p>
        <label>选择框</label>
        <input type="checkbox" class="j-input" data-id="1"/>
    </p>
    <p>
        <label>选择框</label>
        <input type="checkbox" class="j-input" data-id = "2"/>
    </p>
    <p>
        <label>选择框</label>
        <input type="checkbox" class="j-input" data-id="3"/>
    </p>
    <p>
        <label>选择框</label>
        <input type="checkbox" class="j-input" data-id = "4"/>
    </p>
</body>
<script type="text/javascript">

    // 本体函数
    var mainFunc = function(ids) {
        console.log(ids); // 即可打印被选中的所有的id
        // 再把所有的id一次性发ajax请求给服务器端
    };
    // 代理函数 通过代理函数获取所有的id 传给本体函数去执行
    var proxyFunc = (function(){
        var cache = [],  // 保存一段时间内的id
            timer = null; // 定时器
        return function(checkboxs) {
            // 判断如果定时器有的话，不进行覆盖操作
            if(timer) {
                return;
            }
            timer = setTimeout(function(){
                // 在2秒内获取所有被选中的id，通过属性isflag判断是否被选中
                for(var i = 0,ilen = checkboxs.length; i < ilen; i++) {
                    if(checkboxs[i].hasAttribute("isflag")) {
                        var id = checkboxs[i].getAttribute("data-id");
                        cache[cache.length] = id;
                    }
                }
                mainFunc(cache.join(',')); // 2秒后需要给本体函数传递所有的id
                // 清空定时器
                clearTimeout(timer);
                timer = null;
                cache = [];
            },2000);
        }
    })();
    var checkboxs = document.getElementsByClassName("j-input");
    for(var i = 0,ilen = checkboxs.length; i < ilen; i+=1) {
        (function(i){
            checkboxs[i].onclick = function(){
                if(this.checked) {
                    // 给当前增加一个属性
                    this.setAttribute("isflag",1);
                }else {
                    this.removeAttribute('isflag');
                }
                // 调用代理函数
                proxyFunc(checkboxs);
            }
        })(i);
    }

</script>
</html>